<template>
	<view class="bbn_main bg_ff">
		<view class="p10 fs24">
			<view class="font_color_content">当前路径：{{ path }}</view>
			<view class="font_color_tips mt10"> 共{{ list.length }}个对象 </view>
		</view>

		<view class="file_list">
			<scroll-view scroll-x class="scorll_view" v-for="(item, index) in list" :key="item.name" :scroll-left="item.scroll_left" scroll-with-animation @scroll="scrollEvent" :id="item.name">
				<view class="item item_scorll">
					<view class="contentbox" @click="toPath(item)">
						<view class="left">
							<text class="iconfont icon-24gf-folderOpen" v-if="item.type == 'floder'"></text>
							<text class="iconfont icon-wenben" v-else></text>
						</view>
						<view class="mid">
							<view class="title"> {{ item.name }} </view>
							<view class="content" v-if="item.type == 'floder'">
								<view class="size"> 文件夹 </view>
								<view class="date"><text class="iconfont icon-xiugai"></text>{{ item.time_edit }}</view>
								<view class="date"><text class="iconfont icon-jiekoufangwenrizhijiankong"></text>{{ item.time_active }}</view>
							</view>
							<view class="content" v-else>
								<view class="size"> {{ item.size }} </view>

								<view class="date"><text class="iconfont icon-xiugai"></text>{{ item.time_edit }}</view>
								<view class="date"><text class="iconfont icon-jiekoufangwenrizhijiankong"></text>{{ item.time_active }}</view>
							</view>
						</view>
					</view>
					<view class="button" @click="deleteFile(item)" v-if="item.name != '..'">删除</view>
				</view>
			</scroll-view>
		</view>
		<version class="mt40"></version>
	</view>
</template>

<script>
let tagInfo = "[/pages/index/filelist.vue]";
import FileModel from "../../libs/model/file";
import config from "../../config";
export default {
	//name: "index-me",

	props: {
		path: [String],
		url: [String]
	},
	data() {
		return {
			list: []
		};
	},
	created() {
		console.log("create");
		this.loadData();
	},

	methods: {
		async loadData() {
			//this.initSaveData();
			let res = await FileModel.getFloderList(this.path);
			console.log(tagInfo, res);
			if (res.code != 0) {
				return;
			}
			this.list = res.data;
		},
		scrollEvent(e) {
			let name = e.currentTarget.id;
			console.log("scrollEvent", e, name, e.detail.scrollLeft);
			let that = this;
			this.list.forEach((item, index) => {
				if (item.name == name) {
					console.log("scrollEvent 找到了", index, name, item);
					item.scroll_left = e.detail.scrollLeft;
					console.log("scrollEvent 找到了 after", index, name, item);
					// that.$set(this.list, index, item);
				}
			});
			console.log("scrollEvent", e, name, e.detail.scrollLeft, this.list);
		},
		toLeftZero(item) {
			console.log("toLeftZero item", item.scroll_left);
			// item.scroll_left = 0;
			// item.scroll_left = -1;
			this.$nextTick(function () {
				item.scroll_left = 0;
			});
		},
		toPath(pathObj) {
			if (pathObj.name == "..") {
				//如果是返回上级，就回退
				uni.navigateBack();
				return;
			}
			if (pathObj.scroll_left > 0) {
				this.toLeftZero(pathObj);
				return;
			}
			if (pathObj.type == "file") {
				//如果是文件就直接打开
				location.href = config.domain + this.path + pathObj.name;
				return;
			}
			let pathArrOrg = this.path.split("/");
			let pathArr = [];
			pathArrOrg.forEach((item) => {
				if (item) {
					pathArr.push(item);
				}
			});
			console.log("pathArr", pathArr, this.path, pathObj.name);
			pathArr.push(pathObj.name);
			console.log("pathArr after", pathArr);
			let path = "/";
			pathArr.forEach((item) => {
				if (item) {
					path += item + "/";
				}
			});
			console.log("pathArr after", pathArr, path);
			uni.navigateTo({
				url: this.url + "?path=" + path
			});
		},
		async deleteFile(item) {
			let confirmRes = await this._util.message.confirm("提示", "确定要删除 " + item.name + " 吗？");
			if (!confirmRes) {
				return;
			}
			let res = await FileModel.delFile(this.path + item.name);
			console.log(tagInfo, "res", res);
			if (res.code != 0) {
				return;
			}
			this.loadData();
		}
	}
};
</script>

<style lang="scss" scoped>
.bbn_main {
	.file_list {
		scroll-view ::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		}
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 94rpx;
			position: relative;

			.left {
				padding-left: 20rpx;
				.iconfont {
					font-size: 80rpx;
					color: $u-content-color;
				}
				width: 80rpx;
			}
			.mid {
				width: 630rpx;
				text-align: left;
				box-sizing: border-box;
				margin-left: 20rpx;
				border-bottom: $u-border-color solid 1rpx;
				.title {
					font-size: 28rpx;
					color: $u-content-color;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 20rpx 0 0rpx;
				}
				.content {
					padding: 0 20rpx 0 0rpx;
					font-size: 24rpx;
					color: $u-tips-color;
					display: flex;
					height: 43rpx;
					line-height: 43rpx;
					justify-content: space-between;
					.size {
						width: 170rpx;
					}
					.date {
						width: 230rpx;
						text-align: right;
						.iconfont {
							font-size: 24rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}

		.item_scorll {
			display: flex;
			align-items: stretch;
			margin: 0 auto;

			.contentbox {
				flex-shrink: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 94rpx;
				position: relative;
			}

			.button {
				flex-shrink: 0;
				height: 92rpx;
				line-height: 92rpx;
				background-color: $u-type-primary;
				color: #fff;
				text-align: center;
				font-size: 28rpx;
				padding: 0 40rpx;
			}
		}
	}
}
</style>
